<template>
  <div class="container">
    <!-- 跳蚤市场 卡券详情 -->
    <scroll-view scroll-y
                 scroll-with-animation
                 style="height:100%"
                 :scroll-top="scroll_top">
      <div class="page-content">
        <!-- 跳蚤市场 卡券信息 -->
        <div class="ct_info"
             v-if="source==1">
          <card v-if="detail_type==1&&ct_data.style_pic"
                :card_info="ct_data"></card>
          <ticket-mine v-if="detail_type==2"
                       :ticket_info="ct_data"></ticket-mine>
        </div>
        <!-- 我的卡券 卡券信息 -->
        <div class="ct_info"
             v-if="source==2">
          <card-mine v-if="detail_type==1&&ct_data.style_pic"
                     :card_info="ct_data"></card-mine>
          <ticket-mine v-if="detail_type==2"
                       :ticket_info="ct_data"></ticket-mine>
        </div>
        <!-- 挂售信息 -->
        <div class="owner-info"
             v-if="ct_data.card_user_str!=''&&source!=2">
          <div class="icon">
            <img :src="base_url+'/mp_3.2.4/%E4%BF%A1%E6%81%AF%402x.png'"
                 v-if="base_url"
                 alt
                 class="img" />
          </div>
          <div class="msg">{{ct_data.card_user_str}}</div>
        </div>
        <!-- 预览海报按钮 -->
        <div class="poster-btn"
             @tap="open_poster()"
             v-if="source==1&&poster_list.length > 0">
          <img :src="base_url+'/mp_3.2.4/%E7%BC%96%E7%BB%84%206%402x.png'"
               v-if="base_url"
               mode="widthFix"
               alt
               class="img" />
        </div>
        <!-- tab -->
        <div class="tab-bar clearfix">
          <div class="tab-item"
               v-for="(item, index) in tab_arr"
               :key="index"
               :class="{'active':item.tab_id == current_tab}"
               @tap="toggle_tab(item)">{{item.msg}}</div>
        </div>
        <!-- 卡券权益 -->
        <div class="section equities"
             id="equities"
             v-if="ct_data.rights_pic&&ct_data.rights_pic.length>0">
          <div class="sec-title">{{ct_data.type==1?'卡权益':'券权益'}}</div>
          <div class="eq-content">
            <div class="eq-item"
                 v-for="(item, index) in ct_data.rights_pic"
                 :key="index">
              <div class="logo">
                <img :src="img_url+item.pic"
                     v-if="img_url"
                     alt
                     class="img" />
              </div>
              <div class="msg">{{item. name}}</div>
            </div>
          </div>
        </div>
        <!-- 卡券项目 -->
        <div class="section ticket-bar"
             v-if="ct_data.tickets_cards&&ct_data.tickets_cards.length>0">
          <div class="sec-title">{{ct_data.type==1?'卡项目':'券项目'}}</div>
          <ul class="ticket-list">
            <li class="list-item"
                v-for="(item, index) in ct_data.tickets_cards"
                :key="index"
                :class="{'gray':item.is_use==1}">
              <div class="item-info">
                <div class="t-name">
                  <div class="t-type">[{{item.ticket_type_name}}]</div>
                  <div class="msg">{{item.name}}</div>
                </div>
                <div class="t-date">{{item.validity_start_time}}~{{item.validity_end_time}}</div>
              </div>
              <div class="item-btn"
                   v-if="ct_data.ticket_type!=1">
                <div class="btn"
                     v-if="source==1||(source==2&&opt==1)"
                     @tap="project_detail (item)">查看</div>
                <div class="btn"
                     v-if="source==2&&opt==2"
                     @tap="booking_project (item)">{{item.is_use==0?'预约':'已预约'}}</div>
              </div>
            </li>
          </ul>
        </div>

        <!-- 购买须知 -->
        <div class="section notice"
             id="notice"
             v-if="ct_data.notice">
          <div class="sec-title">购买须知</div>
          <div class="notice-content">
            <rich-text type="node"
                       :nodes="ct_data.notice"></rich-text>
          </div>
        </div>
        <!-- 适用医院 -->
        <div class="section hospital"
             id="hospital"
             v-if="ct_data.hospitals&&ct_data.hospitals.length>0">
          <div class="sec-title">适用医院</div>
          <ul class="hos-list">
            <li class="list-item"
                v-for="(item, index) in ct_data.hospitals"
                :key="index">
              <div class="hos-logo">
                <img :src="img_url+item.logo"
                     v-if="img_url&&item.logo"
                     alt
                     class="img" />
              </div>
              <div class="hos-name">{{item.name}}</div>
            </li>
          </ul>
        </div>
      </div>
    </scroll-view>
    <!-- 底部栏位 -->
    <div class="bottom-bar"
         v-if="source==1">
      <div class="service-btn"
           @tap="to_service()">
        <div class="icon">
          <img :src="base_url+'/mp_3.2.4/%E5%92%A8%E8%AF%A2%20(1)%402x.png'"
               v-if="base_url"
               alt
               class="img" />
        </div>
        <div class="msg">客服</div>
      </div>
      <div class="buy"
           @tap="buy_it()">
        <div class="btn">
          <div class="btn-content">
            <div class="price">￥{{ct_data.sale_price}}</div>
            <div class="msg">立即购{{ct_data.type==1?'卡':'券'}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import card from "@/components/ct_store/card";
import ticket from "@/components/ct_store/ticket";
import cardMine from "@/components/ct_store/card_mine";
import ticketMine from "@/components/ct_store/ticket_mine";
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      ct_id: 0,
      ct_data: {},
      tab_arr: [
        {
          msg: "券详情",
          tab_id: "equities"
        },
        {
          msg: "购买须知",
          tab_id: "notice"
        },
        {
          msg: "适用医院",
          tab_id: "hospital"
        }
      ],
      current_tab: "equities",
      poster_list: [],
      show_poster: false,
      //   source 判断页面来源  1跳蚤市场 2我的卡券
      source: 1,
      detail_type: 1,
      opt: 1,
      scroll_top: 0
    };
  },

  methods: {
    //   获取详情
    get_detail () {
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_5/c2c/goods_info",
        {
          id: this.ct_id,
          opt: this.opt,
          type: this.detail_type
        },
        result => {
          let res = result.data;
          wx.hideLoading();
          if (res.status_code == 0) {
            console.log(res);
            this.ct_data = res.data;
            {
              //   配置标题\tab
              switch (this.ct_data.type) {
                case 1:
                  // 卡
                  wx.setNavigationBarTitle({ title: "卡详情" });
                  this.tab_arr[0].msg = "卡详情";
                  break;
                case 2:
                  // 券
                  wx.setNavigationBarTitle({ title: "券详情" });
                  this.tab_arr[0].msg = "券详情";
                  break;
                default:
                  break;
              }
              if (this.ct_data.ticket_type && this.ct_data.ticket_type == 1) {
                // 加盟券
                this.tab_arr.pop()
              }
            }
            {
              //   转时间戳
              if (this.ct_data.tickets_cards) {
                this.ct_data.tickets_cards.forEach(item => {
                  if (item.validity_start_time) {
                    item.validity_start_time = new Date(
                      item.validity_start_time * 1000
                    ).Format("yyyy.MM.dd");
                  }
                  if (item.validity_end_time) {
                    item.validity_end_time = new Date(
                      item.validity_end_time * 1000
                    ).Format("yyyy.MM.dd");
                  }
                });
                this.$forceUpdate();
              }
            }
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    },
    // 切换tab
    toggle_tab (item) {
      let that = this
      this.current_tab = item.tab_id
      let query = wx.createSelectorQuery();
      query.selectViewport().scrollOffset()
      query.select("#" + item.tab_id).boundingClientRect();
      query.exec(function (res) {
        console.log(res);
        let miss = res[0].scrollTop + (res[1] ? res[1].top : 0) - 65;
        console.log(miss);
        if (miss > 0) {
          that.scroll_top = miss
        }

        // wx.pageScrollTo({
        //   scrollTop: miss,
        //   duration: 300
        // });

      });
    },
    // 跳转客服
    to_service () {
      common.to_service();
    },
    // 立即购卡
    buy_it () {
      wx.getStorage({
        key: "user_token",
        success: res => {
          wx.redirectTo({
            url: `/pages/ct_store/confirm_info/main?order_scene=2&goods_id=${
              this.ct_id
              }`
          });
        },
        fail: () => {
          wx.navigateTo({ url: "/pages/package_main/login/main" });
        },
        complete: () => { }
      });
    },
    // 查看卡券项目
    project_detail (item) {
      wx.navigateTo({
        url: `/pages/package_projects/project_detail/main?id=${
          item.project_id
          }&isApoint=true`
      });
    },
    // 预约项目
    booking_project (item) {
      if (item.is_use == 0) {
        // wx.navigateTo({ url: `/pages/package_projects/confirm_bookform/main?project_id=${item.project_id}` });
        // 预约跳错页面了，给你改了（jyy）
        wx.navigateTo({
          url: `/pages/ct_store/ticket_use/main?project_id=${
            item.project_id
            }&ticket_id=${item.id}`
        });
      }
    }
  },
  components: {
    card,
    ticket,
    cardMine,
    ticketMine
  },
  onLoad (options) {
    let that = this;
    this.source = options.source || 1;
    this.detail_type = options.type || 1;
    if (options.opt) {
      this.opt = options.opt;
    }
    if (options.id) {
      this.ct_id = options.id;
      this.get_detail();
    } else {
      wx.showToast({
        title: "缺少卡券id或该卡券不存在", //提示的内容,
        icon: "none", //图标,
        duration: 1500, //延迟时间,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
    }
  },

  onShow () {
    wx.setNavigationBarColor({
      frontColor: "#000000", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#ffffff", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    this.get_detail()
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: rgba(243, 244, 246, 1);
  .page-content {
    padding-bottom: 60px;
    .ct_info {
      margin: 12px;
    }
    .coins-bar {
      margin: 0 12px;
      height: 34px;
      background: rgba(255, 255, 255, 1);
      border-radius: 8px;
      position: relative;
      padding-left: 14px;
      .icon {
        width: 16px;
        height: 16px;
        display: inline-block;
        vertical-align: middle;
        .img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .msg {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        line-height: 34px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 6px;
        &.gold {
          color: rgba(245, 208, 64, 1);
        }
        &.silver {
          color: rgba(190, 204, 206, 1);
        }
      }

      &::before {
        content: "";
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid rgba(255, 255, 255, 1);
        position: absolute;
        left: 20px;
        top: 0;
        transform: translateY(-100%);
      }
    }
    .owner-info {
      padding-left: 12px;
      .icon {
        width: 12px;
        height: 12px;
        display: inline-block;
        vertical-align: baseline;
        margin-right: 4px;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .msg {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        display: inline-block;
        vertical-align: baseline;
      }
    }
    .poster-btn {
      margin: 12px 12px 0px;
      .img {
        width: 100%;
        display: block;
      }
    }
    .tab-bar {
      padding: 20px 0 15px 12px;
      position: sticky;
      top: 0;
      background-color: rgba(243, 244, 246, 1);
      z-index: 50;
      .tab-item {
        font-size: 16px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        line-height: 22px;
        float: left;
        margin-right: 30px;
        padding-bottom: 8px;
        position: relative;
        &.active {
          color: rgba(255, 95, 75, 1);
          &::before {
            content: "";
            width: 28px;
            height: 4px;
            background: rgba(255, 95, 75, 1);
            border-radius: 5px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
    .section {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 5px 0px rgba(167, 167, 167, 0.08);
      border-radius: 8px;
      padding: 12px;
      .sec-title {
        font-size: 16px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
        font-weight: bold;
      }
      &.equities {
        margin: 15px 12px 0;
        .eq-content {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          .eq-item {
            width: 25%;
            margin-top: 16px;
            .logo {
              width: 40px;
              height: 40px;
              background: rgba(230, 230, 230, 1);
              margin: 0 auto 4px;
              border-radius: 50%;
              overflow: hidden;
              .img {
                width: 100%;
                height: 100%;
              }
            }
            .msg {
              font-size: 12px;
              font-family: "PingFangSC-Regular", "PingFang SC";
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              line-height: 17px;
              text-align: center;
            }
            &:first-of-type {
              margin-top: 20px;
            }
          }
        }
      }
      &.ticket-bar {
        margin: 12px 12px 0;
        .ticket-list {
          .list-item {
            height: 84px;
            margin-top: 12px;
            position: relative;
            overflow: hidden;
            background-image: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.2.4/%E7%BC%96%E7%BB%84%207%E5%A4%87%E4%BB%BD%202%402x.png");
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            .item-info {
              flex: 1;
              padding: 12px;
              box-sizing: border-box;
              .t-name {
                display: flex;
                .t-type {
                  display: inline-block;
                  vertical-align: middle;
                  font-size: 14px;
                  font-family: "PingFangSC-Medium", "PingFang SC";
                  font-weight: 500;
                  color: rgba(255, 95, 75, 1);
                }
                .msg {
                  display: inline-block;
                  vertical-align: middle;
                  flex: 1;
                  font-size: 14px;
                  font-family: "PingFangSC-Medium", "PingFang SC";
                  font-weight: 500;
                  color: rgba(51, 51, 51, 1);
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                }
              }
              .t-date {
                position: absolute;
                bottom: 13px;
                left: 12px;
                font-size: 12px;
                font-family: "PingFangSC-Regular", "PingFang SC";
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
              }
            }
            .item-btn {
              width: 55px;
              position: relative;
              .btn {
                width: 36px;
                height: 36px;
                background: linear-gradient(
                  270deg,
                  rgba(232, 58, 94, 1) 0%,
                  rgba(255, 168, 70, 1) 100%
                );
                border-radius: 18px;
                font-size: 12px;
                font-family: "PingFangSC-Regular", "PingFang SC";
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                line-height: 36px;
                text-align: center;
                box-sizing: border-box;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }
            &.gray {
              -webkit-filter: grayscale(100%);
              -moz-filter: grayscale(100%);
              -ms-filter: grayscale(100%);
              -o-filter: grayscale(100%);
              filter: grayscale(100%);
              filter: gray;
            }
          }
        }
      }
      &.notice {
        margin: 12px 12px 0;
        .notice-content {
          margin-top: 20px;
        }
      }
      &.hospital {
        margin: 12px 12px 0;
        .hos-list {
          margin-top: 7px;
          display: flex;
          columns: 2;
          flex-wrap: wrap;
          justify-content: space-between;
          .list-item {
            width: 49%;
            display: flex;
            background: rgba(249, 249, 249, 1);
            border-radius: 6px;
            margin-top: 7px;
            .hos-logo {
              width: 28px;
              height: 28px;
              background: rgba(230, 230, 230, 1);
              border-radius: 50%;
              margin: 12px 4px 0 8px;
              .img {
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            .hos-name {
              font-size: 14px;
              font-family: "PingFangSC-Regular", "PingFang SC";
              font-weight: 400;
              color: rgba(88, 88, 88, 1);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              line-height: 52px;
              flex: 1;
            }
          }
        }
      }
    }
  }

  .bottom-bar {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -4px 5px 0px rgba(229, 229, 229, 0.48);
    z-index: 10;
    display: flex;
    .service-btn {
      width: 50px;
      height: 50px;
      .icon {
        width: 20px;
        height: 20px;
        margin: 5px auto 1px;
        .img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .msg {
        font-size: 12px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        text-align: center;
      }
    }
    .buy {
      flex: 1;
      .btn {
        margin: 5px 10px 0;
        height: 38px;
        background: linear-gradient(
          270deg,
          rgba(232, 58, 94, 1) 0%,
          rgba(255, 168, 70, 1) 100%
        );
        border-radius: 8px;
        text-align: center;
        position: relative;
        .btn-content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          .price {
            font-size: 18px;
            font-family: "PingFangSC-Medium", "PingFang SC";
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 4px;
          }
          .msg {
            font-size: 14px;
            font-family: "PingFangSC-Medium", "PingFang SC";
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .poster-model {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
  }
}
</style>

